.warning, .info, .note, .github {
  padding: 10px 20px;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
  margin: 10px 0;
  position: relative;

  &:before {
    font-family: icons !important;
    font-weight: normal;
    position: absolute;
    font-size: 17px;
    top: -5px;
    left: -5px;
    background-color: white;
    width: 25px;
    text-align: center;
    height: 25px;
    border-radius: 15px;
    border-width: 1px;
    border-style: solid;
    line-height: 25px;
  }

  a {
    color: $c-light-blue;
    border-bottom: 1px dashed lighten($c-light-blue, 30);

    &:hover {
      color: darken($c-light-blue, 5);
      border-color: lighten($c-light-blue, 25);
    }
  }

  code {
    background-color: $c-light-blue;
    color: white;
    padding: 2px 10px 4px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.warning {
  @extend .icon-attention;
  background-color: lighten($c-red, 35);
  color: $c-red;

  &, &:before {
    border-color: lighten($c-red, 30);
  }

  &:before {
    line-height: 23px;
  }
}

.info {
  @extend .icon-info;
  background-color: lighten($c-green, 35);
  color: darken($c-green, 20);

  &, &:before {
    border-color: lighten($c-green, 30);
  }
}

.note {
  @extend .icon-doc-text;
  background-color: lighten($c-yellow, 35);
  color: darken($c-yellow, 20);

  &, &:before {
    border-color: lighten($c-yellow, 30);
  }
}

.github {
  @extend .icon-github;
  background-color: #F3F3F3;
  color: #333;

  a {
    color: #4183C4;

    &:hover {
      color: lighten(#4183C4, 10);
    }
  }

  &, &:before {
    border-color: #E5E5E5;
  }
}
